<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Banner from "./Banner.svelte";
    import { Link } from "../Typography";
    import Space from "../Space/Space.svelte";
    import { Button } from "../Button";

    const { Story } = defineMeta({
        title: "Components/Views/Banner",
        component: Banner,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="v">
            <Banner type="info">
                <div>备注： 如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法在这里。</div>
            </Banner>
            <Banner type="warning">
                <div>备注： 如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法在这里。</div>
            </Banner>
            <Banner type="success">
                <div>安装成功： 软件安装成功，已是最新版本。</div>
            </Banner>
            <Banner type="error">
                <div>尚未安装插件，该功能还无法使用</div>
            </Banner>
        </Space>
    {/snippet}
</Story>

<Story name="fullMode" args={{ fullMode: false }}>
    {#snippet template(args)}
        {#snippet commonTitle()}
            <div style={"font-weight: bold; color: var(--cui-color-text-0); font-size: 14px"}>不知道 AppKey？</div>
        {/snippet}
        <Space dir="v" style="width: 650px;">
            <Banner type="info" fullMode={false} bordered icon={null} closeIcon={null} title={commonTitle}>
                <div>你可先联系对应的研发同学，确认是否已在 应用云平台 申请了应用，并填写对应的信息。</div>
            </Banner>
            <Banner type="warning" fullMode={false} bordered icon={null} closeIcon={null} title={commonTitle}>
                <div>你可先联系对应的研发同学，确认是否已在 应用云平台 申请了应用，并填写对应的信息。</div>
            </Banner>
            <Banner type="success" fullMode={false} bordered icon={null} closeIcon={null} title={commonTitle}>
                <div>你可先联系对应的研发同学，确认是否已在 应用云平台 申请了应用，并填写对应的信息。</div>
            </Banner>
            <Banner type="error" fullMode={false} bordered icon={null} closeIcon={null} title={commonTitle}>
                <div>你可先联系对应的研发同学，确认是否已在 应用云平台 申请了应用，并填写对应的信息。</div>
            </Banner>
        </Space>
    {/snippet}
</Story>

<Story name="Extra" args={{ fullMode: false }}>
    {#snippet template(args)}
        <Space style="width: 450px;">
            <Banner fullMode={false} title="Title" type="warning" bordered>
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat
                </div>
                {#snippet extra()}
                    <div style="margin: 16px 0 0; text-align: right">
                        <Space justify="end">
                            <Button theme="borderless">No, thanks.</Button>
                            <Button type="warning">Sounds great!</Button>
                        </Space>
                    </div>
                {/snippet}
            </Banner>
        </Space>
    {/snippet}
</Story>

<Story name="Icon">
    {#snippet template(args)}
        <Space style="width: 450px;">
            <Banner type="info" fullMode={false} bordered title="Title">
                {#snippet icon()}
                    <Icon icon="f7:heart" width={24} />
                {/snippet}
                <div>你可先联系对应的研发同学，确认是否已在 应用云平台 申请了应用，并填写对应的信息。</div>
            </Banner>
        </Space>
    {/snippet}
</Story>

<Story name="Border" args={{ bordered: true }}>
    {#snippet template(args)}
        <Space dir="v">
            <Banner {...args} type="info">
                <div>备注： 如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法在这里。</div>
            </Banner>
            <Banner {...args} type="warning">
                <div>备注： 如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法在这里。</div>
            </Banner>
            <Banner {...args} type="success">
                <div>安装成功： 软件安装成功，已是最新版本。</div>
            </Banner>
            <Banner {...args} type="error">
                <div>尚未安装插件，该功能还无法使用</div>
            </Banner>
        </Space>
    {/snippet}
</Story>
